<template>

	<div>
		<div class="login-container" v-bind:style="{height:wH+'px'}">
			<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
				<el-form-item label="用户名" prop="username">
					<el-input v-model.number="ruleForm2.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="pass">
					<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
					<el-button @click="resetForm('ruleForm2')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'login',
		data() {
			var checkUsername = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('用户名不能为空'));
				}
				if(!Number.isInteger(value)) {
					callback(new Error('请输入数字值'));
				} else {
					if(value < 18) {
						callback(new Error('必须为数字或字符'));
					} else {
						callback();
					}
				}
			};
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				wH: document.body.clientHeight || document.documentElement.clientHeight,
				username: '',
				pwd: '',
				usernameTips: '',
				pwdTips: '',
				ruleForm2: {
					pass: '',
					username: ''
				},
				rules2: {
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					username: [{
						validator: checkUsername,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					setTimeout(() => {
						if(valid) {
							this.$router.push({
								name: 'home'
							});
						} else {
							console.log('error submit!!');
							return false;
						}
					}, 1000);
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style scoped="scoped">
	.login-container {
		background: #92a8b7;
	}
	
	form.demo-ruleForm {
		width: 40%;
		padding: 20px;
		background: #ccc;
		border-radius: 15px;
		box-shadow: 0px 0px 10px #000;
		position: fixed;
		right: 30%;
		top: 50%;
		transform: translate(50%, -50%);
	}
	
	.form-group {
		margin-bottom: 0;
	}
	
	.el-form-item__label {
		text-align: left;
	}
	
	.el-form .el-form-item__content:nth-child(3) {
		margin-left: 0!important;
	}
</style>